<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/10/12
  Time: 9:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="状态设置"/>
</jsp:include>

<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>
<div class="content-wrapper content-wrapper-bg">
    <section class="content-header">
        <h4 class="page-title" style="display: inline-block"><spring:message code="label.tenant.status.setting.list"/></h4>

        <%--<a id="setting" class="btn btn-add" data-toggle="modal" data-target="#myModal"--%>
           <%--style="margin-left:14px;cursor: pointer;">--%>
            <%--<i class="fa fa-plus" style="margin-right: 3px"></i>状态订阅--%>
        <%--</a>--%>
        <a class="btn btn-add" href="javascript:getSettingPage();" style="margin-left:14px;">
            <i class="fa fa-plus" style="margin-right: 3px"></i><spring:message code="label.tenant.status.set"/>
        </a>

        <div class="form-group has-success has-feedback" style="float: right;margin-right: 40px;">
            <input type="text" placeholder="<spring:message code="label.admin.search"/>" class="form-control"
                   id="inputSuccess2"
                   style="border-radius:5px;border-color:#aabfcb">
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>
    </section>
    <section class="content">
        <div class="box box-primary table-header-line">
            <div class="box-body" style="padding: 0">
                <table class="table" id="user_list">
                    <thead>
                    <tr>
                        <th><spring:message code="label.device.type"/></th>
                        <th><spring:message code="label.tenant.status.type"/></th>
                        <th><spring:message code="label.details"/></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <%--</div>--%>
    </section>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         data-backdrop="false" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">
                        <spring:message code="label.tenant.select.subscription.status.type"/>
                    </h4>
                </div>
                <div class="modal-body">
                    <div id="status" style="background-color: #fff">
                        <c:forEach items="${status}" var="s">
                            <div>
                                <div class="radio" data-value="${s.id}">
                                   status type  ${s.statusType}
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-default" data-dismiss="modal"><spring:message
                            code="label.cancel"/>
                    </button>
                    <button id="create" type="button" class="btn btn-primary">
                        <spring:message code="label.save"/>
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<jsp:include page="../../include/foot.jsp"/>

<script>
    $(function () {
        var key = getKeyByUrl();
        var table = $('#user_list').DataTable({
            "dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer dataTable-footer-padding"<"pull-left"i><"pull-right"p>>',
            paging: true,
            lengthChange: false,
            ordering: true,
            autoWidth: false,
            info: true,
            fixedHeader: true,
            searching: true,
            aLengthMenu: [15],
            ajax: {
                url: '/partner/{tenant}/api/v1/state/getAllSetting'.replace("{tenant}", getKeyByUrl()),
//                url: '/partner/{tenant}/api/v1/state/getAllSettingByDataTable'.replace("{tenant}", getKeyByUrl()),
                dataSrc: 'data'
            },
            columns: [
                {
                    data: 'type'
                },
                {
                    data: 'value',
                    "render": function (data, type, full, meta) {
                        var values = JSON.parse(data);

                        var divString = '';
                        $.each(values, function (index, a) {
                            var x = a.stTypeName;
                            divString += '<div>' + x + '</div>';
                        });
                        return divString;
                    }
                },
                {
                    data: 'value',
                    "render": function (data, type, full, meta) {
                        var values = JSON.parse(data);

                        var divString = '';
                        $.each(values, function (index, a) {
                            var x = a.values;
                            var z = '';
                            $.each(x, function (index, y) {
                                z += '状态码-'+y.statusType + ':' + '别名-'+y.name + ";";
                            });
                            divString += '<div>'+ z + '</div>';
                        });
                        return divString;
                    }
                }
            ],
            "language": {url: '/lang/datatable.chs.json'}
        });

        $('#inputSuccess2').bind('keyup', function (e) {
            table.search(this.value).draw();
        });

        $("#cancel").click(function () {
            $("#myModal").modal('hide');
            removeSelected();
        });

        $("#create").click(function () {
            var $selected = $("#status .selected");
            var ids = [];
            $.each($selected, function (index,s) {
                ids.push($(s).data("value"));
            });

            $.ajax({
                url:"/partner/{tenant}/api/v1/state/save".replace("{tenant}",getKeyByUrl()),
                type:"post",
                data:{ids:JSON.stringify(ids)},
                success: function (data) {
                    swal({
                        title: "<spring:message code="label.tenant.enable.account"/>",
                        text: "<spring:message code="label.tenant.sure.enable.account"/>",
                        type: "success",
                        showCancelButton: false,
                        showConfirmButton: "true",
                        confirmButtonText: "<spring:message code="label.admin.confirm"/>",
                        animation: "slide-from-top"
                    }, function () {
                        $("#myModal").modal('hide');
                        removeSelected();
                    })
                },
                error:function(e){
                    console.log(e);
                }
            });
            console.log(ids);
        });

        $("#status .radio").bind('click', function () {
            $(this).hasClass('selected') ? $(this).removeClass('selected') : $(this).addClass('selected');
        });

        $("#myModal").on("show.bs.modal", function () {
            $.ajax({
                url: "/partner/{tenant}/api/v1/state/get".replace("{tenant}", getKeyByUrl()),
                type: "get",
                success: function (data){
                    if (data.data !==null){
                        var arr = JSON.parse(data.data.metaDefinition);
                        $.each(arr, function (index,id) {
                            $('#status div[data-value="'+id+'"]').addClass("selected");
                        });
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });
    });

    function getSettingPage() {
        window.location.href = "/partner/{tenant}/state/stateSetting#stateSetting".replace("{tenant}", getKeyByUrl());
    }

    function removeSelected(){
      var radios = $("#status .selected");
        for (var i= 0; i<radios.length;i++){
            $(radios[i]).removeClass("selected");
        }
    }
</script>
